import React ,{useState}from "react";
import { Modal,Form, Button,Input,Select,InputNumber }  from 'antd'
import { ProFormUploadButton } from '@ant-design/pro-form';
import { upload } from "@/services/ant-design-pro/apis";

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;


const UpdateAdmin = (props) => {
    
    const formLayout = {
        labelCol: {
            span: 5,
        },
        wrapperCol: {
            span: 15,
        },
    };
    

    const {
        onSubmit: handleUpdate,
        onCancel: handleModalVisible,
        updateModalVisible,
    } = props


    const [formVals,setFormVals]=useState({
        id:props.values.id,
        name:props.values.name,
        account:props.values.account,
        password:props.values.password,
        status:props.values.status
    })


    const handleSubmit = async () => {
        try {
            const fieldVlas = await form.validateFields();
            handleUpdate({ ...fieldVlas})
            onReset()
        } catch (err) {
            console.log(err)
        }
    }


    const onReset = () => {
        form.resetFields();
    }


    const [form] = Form.useForm();

    return (
        <Modal
            title="配置管理员"
            width={540}
            visible={updateModalVisible}
            destroyOnClose
            onCancel={() => {
                onReset();
                handleModalVisible(false)
            }}
            footer={[
                <Button key="reset" onClick={()=>{handleModalVisible()}}>取消</Button>,
                <Button type="primary" key="submit" onClick={() => { handleSubmit() }}>提交</Button>
            ]}
        >
            <Form
              {...formLayout}
              initialValues={
                  {
                    name:formVals.name,
                    account:formVals.account,
                    password:formVals.password,
                    status:formVals.status
                  }
              }
              form={form}
            >
                <FormItem
                  label="名称"
                  name="name"
                 
                >
                    <Input placeholder="请输入名称"></Input>
                </FormItem>
                <FormItem
                  label="账号"
                  name="account"
                  
                >
                   <Input  placeholder="请输入账号" rows={4}/>
                </FormItem>
                <FormItem
                  label="密码"
                  name="password"
                >
                   <Input type="password" placeholder="请输入密码" rows={4}/>
                </FormItem>

                <FormItem
                    label="状态"
                    name="status"
                >
                    <Select>
                        <Option value={"ENABLE"}>启用</Option>
                        <Option value={"FORBIDDEN"}>禁用</Option>
                    </Select>
                </FormItem>
                
            </Form>
        </Modal>
    )
}

export default UpdateAdmin;